<template>
  <div>
    <BasicTable @register="registerTable" >
      <template #tableTitle>
        <a-button type="primary" @click="handleForm(false, {})" >
          <Icon icon="ant-design:plus-outlined" /> {{ t('新增') }}
        </a-button>
      </template>
    </BasicTable>
    <InputForm @register="registerInputFormDrawer" @success="reload()" />
  </div>
</template>
<script lang="ts" name="shop-goods-expand" setup>
import { ref } from 'vue';
import { BasicTable, BasicColumn, useTable, FormSchema } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGlobSetting } from '/@/hooks/setting';
import { listGoodsAttr, deleteGoodsAttr } from '/@/api/bizShop/shop';
import { useMessage } from '/@/hooks/web/useMessage';
import InputForm from './GoodsAttrForm.vue';
import { Icon } from '/@/components/Icon';
import { render } from '/@/utils/common/renderUtils';

const { t } = useI18n('');
const { createMessage } = useMessage();
const glob = useGlobSetting();
const [registerInputFormDrawer, { openDrawer: openInputFromDrawer }] = useDrawer();


const columns: BasicColumn[] = [
  {
    title: t('名称'),
    dataIndex: 'name',
    width: 100,
  },
  {
    title: t('属性值'),
    dataIndex: 'values',
    width: 280,
    align: 'center',
    customRender: ({text}) => {
      let color = 'green'
      const value = text.map(e => e.additionalPrice > 0 ? e.name + ' $' + e.additionalPrice : e.name)
      return render.renderTag(value, color)
    },
  },
  {
    title: t('排序号'),
    dataIndex: 'sortNo',
    width: 60,
    align: 'center',
  },
  {
    title: t('支持多选'),
    dataIndex: 'multipleChoice',
    width: 80,
    align: 'center',
    customRender: ({text}) => {
      const value = text ? '是' : '否'
      let color = 'green'
      if (!text) {
        color = 'red'
      }
      return render.renderTag(value, color)
    },
  },
  {
    title: t('是否必填'),
    dataIndex: 'required',
    width: 80,
    align: 'center',
    customRender: ({text}) => {
      const value = text ? '是' : '否'
      let color = 'green'
      if (!text) {
        color = 'red'
      }
      return render.renderTag(value, color)
    },
  },
];

const actionColumn: BasicColumn = {
  width: 90,
  title: '操作',
  dataIndex: 'action',
  fixed: 'right',
  slot: 'tableActions',
  actions:  (record: Recordable) => [
    {
      label: '删除',
      color: 'error',
      // auth: 'sys:area:delete',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    },
    {
      label: '编辑',
      onClick: handleForm.bind(null, true, record),
    }
  ],
  dropDownActions: (record: Recordable) => [

  ]
}

const [registerTable, { reload }] = useTable({
  title: '属性库',
  api: listGoodsAttr,
  columns,
  bordered: false,
  // formConfig: {
  //   baseColProps: { lg: 6, md: 12 },
  //   labelWidth: 90,
  //   schemas: searchFormSchema,
  //   showResetButton: false,
  // },
  ellipsis: false,
  showTableSetting: false,
  useSearchForm: false,
  isTreeTable: false,
  pagination: false,
  canResize: false,
  rowKey: 'id',
  actionColumn,
})

async function handleDelete(record) {
  await deleteGoodsAttr({ id: record.id })
  reload()
}

const handleForm = (isUpdate, record) => {
  openInputFromDrawer(true, { record, isUpdate });
}

</script>
